/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Tabs, WhiteSpace } from 'antd-mobile'
import { getOrderList } from '../../actions/orderListActions'
import {
	OrderListMsg,
	NoData
} from '../../components/orderList'
import { TabBar } from 'app/components'
import 'style/orderList.scss'
import style from './index.scss'
import common from '../../utils/common'
const TabPane = Tabs.TabPane;

class OrderList extends Component {
	constructor(props) {
		super(props)
		this.state = {
			isShowList: 1,
			tabBar: {
				selectedIndex: 1, // 选中的tab下标
				isFixed: true, // 是否固定在底部
				list: [
					{
						pagePath: "test", // 页面跳转路由
						text: "车辆年检",  // tab文案
						iconPath: "./images/visaNav.png", //默认图标
						selectedIconPath: "./images/visaNav_s.png",  // 选中图标
					},
					{
						pagePath: "orderList",
						text: "我的订单",
						iconPath: "./images/orderNav.png",
						selectedIconPath: "./images/orderNav_s.png",
					},
				]
			}
		}
		this.tabsCallback = this.tabsCallback.bind(this);
	}

	/**
	 * 生命周期
	 */
	componentWillMount() {

	}
	componentWillUnmount() {
		window.isShowVisa = true;
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentDidMount() {
		common.setViewTitle('我的订单');
		this.setOrderType(1)
	}

	setOrderType(type) {
		//业务类型 1查询办理中，2/查询已完成 3 查询全部订单
		let getData = {
			bizFlag: type
		}
		this.props.dispatch(getOrderList(getData, (res) => {
			this.setState({
				isShowList: res.length > 0 ? true : false
			})
		}))
	}

	tabsCallback(key) {
		console.log('onChange', key);
		this.setOrderType(key)
	}

	handleTabClick(key) {
		console.log('onTabClick', key);

	}

	// 底部tab点击
	tabClick(index) {
		let { tabBar } = this.state;
		let { list } = tabBar;
		this.props.router.replace(list[index].pagePath);
	}

	render() {
		console.log(this.state.tabBar)
		return (
			<div className={style.orderList} style={{ paddingBottom: '1rem' }}>
				<Tabs defaultActiveKey="1" animated={false} swipeable={false} onChange={(key) => this.tabsCallback(key)} onTabClick={this.handleTabClick()}>
					{/*<TabPane tab={navigation.groupName} key={navigation.groupId}>*/}
					{
						this.props.headTag.map((headTag, headTagIndex) =>
							<TabPane tab={headTag.name} key={headTag.key}>
								<WhiteSpace size="rem24" style={{ position: "relative", background: '#f1f1f1', zIndex: "1", height: '.24rem' }} /> {/*  上下间隔 */}
								{
									this.state.isShowList ?
										this.props.orderList.map((orderList, orderListIndex) =>
											<OrderListMsg
												key={orderListIndex}
												orderList={orderList}
												/>
										) : !this.props.orderList ? <div></div> : <NoData key={headTag.key} />
								}
							</TabPane>
						)
					}
				</Tabs>
				<WhiteSpace />
				<TabBar {...this.state.tabBar} tabClick={(index) => this.tabClick(index)} />
			</div>
		)
	}
}

//使用context
OrderList.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderList.defaultProps = {
	data: [],
	index: ['', ''],
	headTag: [   //标签头部
		{
			name: '办理中',
			key: 1
		}, {
			name: '已完成',
			key: 2
		}, {
			name: '全部订单',
			key: 3
		}
	],
	orderList: [],
	list: [
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' },
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' },
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' }
	]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)